import React, {useEffect, useState} from 'react';

const App = () => {

  const [count, setCount] = useState(100)
  const [name, setName] = useState('高举')
  const [proList, setProList] = useState([])

  // 如果没有设置依赖项，那么只要组件中的任何数据发生了变化，该 hooks 一定会被调用
  /*
    useEffect 有两个参数
    第一个参数： 是一个回调函数，该函数会在组件挂载和组件更新的阶段调用
    替代类组件中的 componentDidMount 以及 componentDidUpdate，函数式组件使用的是 useEffect。
    第二个参数： 是一个 依赖参数 ，只有依赖被改变的时候才会执行 useEffect，如果我们写的是
    一个 []，那么就相当于不加任何依赖，那么此时该 useEffect 就只会被执行一次。
  */
  // useEffect(()=>{
  //   console.log('太神奇了，人只要付出真心，就会获得伤害。');

  //   fetch('http://121.89.205.189:3000/api/pro/list').then(res => res.json()).then(res => {
  //     console.log(res.data);
  //     setProList(res.data)
  //   })
  // }, [])


  // 当前 useEffect 添加一个依赖 count,那么只要 count 发送改变就会立即执行回调 useEffect
  // 依赖是可以添加多个的，那么只要其中一个发生变化，就会重新执行 useEffect，添加依赖可以实现
  // 类似 vue 中的侦听器和计算属性一样的功能，可以监听到值变化后来做一些操作
  // useEffect(()=>{
  //   console.log('太神奇了，人只要付出真心，就会获得伤害。');

  //   fetch('http://121.89.205.189:3000/api/pro/list').then(res => res.json()).then(res => {
  //     console.log(res.data);
  //     setProList(res.data)
  //   })
  // }, [count])


  useEffect(()=>{
    console.log(11111111);

    const time = setInterval(() => {
      setCount(count - 1)
    }, 1000);

    return ()=>{
      // 会在下一次调用 useEffect 之前执行
      console.log(66666666);

      // 在当前函数中可以做清除 副作用，用的函数
      // 取消订阅操作，销毁定时器等操作
      // 清除副作用的函数，会在下一次执行 useEffect 之前被调用
      clearInterval(time)
    }
  }, [count])

  useEffect(()=>{
    console.log(22222222);
  }, [count])

  useEffect(()=>{
    console.log(33333333);
  }, [count])

  return (
    <div>
      <h1>{name} -- {count}</h1>
      <button onClick={()=>{setCount(count+1)}}>点击增加</button>
      <button onClick={()=>{setName('不举')}}>点击修改 name </button>

      <ol>
        {proList.length && proList.map(item => {
          return <li key={item.proid}>{item.proname}</li>
        })}
      </ol>
    </div>
  );
};

export default App;
